<template>
	<!-- 积分商城 -->
	<view class="PointsMall public">
		<view class="header">
			<view class="header-title">
				<text>{{ point }}</text>
			</view>
			<view class="header-rule">
				<text @click="JumpPointsRule">
					<!-- <icon class="icon-box-img" type="warn" size="28rpx" color="white"></icon> -->
					<uni-icons type="info-filled" size="28rpx" color="white"></uni-icons>
				</text>
				<text @click="JumpPointsRule">积分兑换规则</text>
			</view>
			<view class="header-footer">
				<view class="header-footer-item" @click="JumpPointsDetails">
					积分明细
				</view>
				<view class="header-footer-item" @click="JumpExchangeRecords">
					积分兑换记录
				</view>
			</view>
		</view>
		<view class="PopularRedemption">
			<view class="PopularRedemption-title">
				<text class="PopularRedemption-title-style"></text>
				<text class="PopularRedemption-title-font">热门兑换</text>
			</view>
			<view class="PopularRedemption-main">
				<template v-if="arr.list.length > 0">
					<view class="PopularRedemption-main-item" v-for="item in arr.list" :key="item.id">
						<view class="main-item-image">
							<image src="../../../static/my/giveServiceTo/quan.png" mode=""></image>
						</view>
						<view class="main-item-title">
							{{ item.name }}
						</view>
						<view class="main-item-data">
							<view class="main-item-data-num">
								<text>{{ item.point }}</text>积分
							</view>
							<view class="main-item-data-change" @click="redeemNow(item.id)">
								立即兑换
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view>
						<image style="width: 750rpx;height: 750rpx;"
							src="https://img.zcool.cn/community/01d29258cce264a801219c77ec3f60.png" mode=""></image>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
const $api = require('@/utils/request.js').API
export default {
	data() {
		return {
			arr: [],
			point: ''
		}
	},
	onLoad() {
		this.IntegralList()
		this.accountInformation()
	},
	methods: {
		accountInformation() {
			$api.postAccountInformation({
				account_type: 'point'
			}).then(res => {
				this.point = res.data.data.point
			})
		},
		IntegralList() {
			$api.postIntegralList({}).then(res => {
				this.arr = res.data.data
			})
		},
		redeemNow(id) {
			$api.postCommoditySubmitToOrderForGoods({
				id: id,
				num: 1,
			}).then(res => {
				setTimeout(() => {
					uni.showToast({
						title: '兑换成功',
						icon: 'none'
					})
				}, 500)
				this.accountInformation()
			})
		},
		// 跳转到兑换记录页面
		JumpExchangeRecords() {
			uni.navigateTo({
				url: '../../my/giveServiceTo/ExchangeRecords'
			})
		},
		// 跳转积分规则
		JumpPointsRule() {
			uni.navigateTo({
				url: '../../my/giveServiceTo/PointsRule'
			})
		},
		// 跳转积分明细
		JumpPointsDetails() {
			uni.navigateTo({
				url: '../../my/giveServiceTo/PointsDetails'
			})
		}
	}
}
</script>

<style lang="less" scoped>
.PointsMall {

	// 积分商城头部
	.header {
		width: 750rpx;
		height: 411rpx;
		background: url(../../../static/my/giveServiceTo/background.png) no-repeat;
		// background: url();
		background-size: 100% 100%;
		color: white;
		text-align: center;

		// 积分
		.header-title {
			font-size: 87rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			padding-top: 90rpx;
			// line-height: 149rpx;
		}

		// 积分规则
		.header-rule {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			// padding: 47rpx 0 49rpx 0;
			padding: 27rpx 0 39rpx 0;

			// icon图标
			.icon-box-img {
				padding-bottom: 8rpx;
				padding-right: 10rpx;
			}
		}

		// 积分明细和积分兑换记录
		.header-footer {
			display: flex;
			justify-content: space-around;
			width: 650rpx;
			margin: auto;
			font-size: 28rpx;

			.header-footer-item {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 247rpx;
				height: 77rpx;
				border: 1px solid #FFFFFF;
				border-radius: 39rpx;
			}
		}
	}

	// 热门兑换
	.PopularRedemption {
		width: 702rpx;
		margin: auto;

		// 标题
		.PopularRedemption-title {
			display: flex;
			align-items: center;
			padding: 25rpx 0 26rpx 0;

			.PopularRedemption-title-style {
				display: inline-block;
				width: 10rpx;
				height: 38rpx;
				background: #F14500;
			}

			.PopularRedemption-title-font {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #161415;
				padding-left: 17rpx;
			}
		}

		// 内容
		.PopularRedemption-main {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;

			// 每一条数据
			.PopularRedemption-main-item {
				width: 339rpx;
				height: 442rpx;
				background: #FEFEFE;
				box-shadow: 0rpx 1rpx 9rpx 1rpx rgba(151, 151, 151, 0.06);
				border-radius: 15rpx;
				margin-bottom: 20rpx;

				// 图片
				.main-item-image {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 338rpx;
					height: 289rpx;
					background: #EFEFEF;
					border-radius: 15rpx 15rpx 0rpx 0rpx;

					image {
						width: 216rpx;
						height: 221rpx;
						border-radius: 18rpx;
					}
				}

				// 标题
				.main-item-title {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 34rpx;
					padding-left: 13rpx;
				}

				// 积分兑换
				.main-item-data {
					display: flex;
					justify-content: space-between;
					padding: 36rpx 19rpx 38rpx 19rpx;

					.main-item-data-num {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #F14500;
					}

					.main-item-data-change {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 118rpx;
						height: 38rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						background: #F14500;
						border-radius: 19rpx;
					}
				}
			}
		}
	}
}
</style>